<!--
 * @Description: Stay hungry，Stay foolish
 * @Author: ''
 * @Date: 2023-07-25 19:53:49
 * @LastEditTime: 2023-07-25 23:26:47
 * @LastEditors: ''
-->
<template>
  <div>
    <div class="demo-inner-divider">基础用法，固钉默认固定在页面顶部</div>
    <e-affix :offset="20" @scroll="onScroll" @change="onChange">
      <e-button type="primary">Offset top 120px</e-button>
    </e-affix>

    <div class="demo-inner-divider">自定容器</div>
    <p>通过设置 target 属性，让固钉始终保持在容器内， 超过范围则隐藏。</p>
    <div class="affix-container">
      <e-affix target=".affix-container" :offset="80">
        <e-button type="primary">Target container</e-button>
      </e-affix>
    </div>

    <div class="demo-inner-divider">固定容器</div>
    <div>
      <e-affix position="bottom" :offset="20">
        <e-button type="primary">Offset bottom 20px</e-button>
      </e-affix>
    </div>

    <affix-md class="markdown-body" />
  </div>
</template>

<script>
import affixMd from "../../docs/affix.md"
export default {
  components:{
    affixMd
  },
  methods:{
    onScroll(obj){
      console.log("obj",obj)
    },
    onChange(val){
      console.log("fixed",val)
    }
  }
}
</script>

<style scoped>
.affix-container {
  text-align: center;
  height: 700px;
  border-radius: 4px;
  background: #ecf5ff;
}
</style>